<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>时间：{{ this.info.dataTime }}</span>
      </div>
      <div id="print-div" class="mainBox" style="height: 1150px">
        <div
          style="
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
          "
        >
          <img
            src="@/icons/img/changzhi.png"
            style="width: 30px; height: 30px; vertical-align: middle"
          />{{ this.$store.state.City }}医院 <br />
          住院患者转科交接单
        </div>
        <div class="warp">
          <div class="one">
            <div
              style="
                display: inline-block;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                margin-left: 25px;
                margin-top: 4px;
              "
            >
              姓名：
              <span
                style="
                  display: inline-block;
                  width: 70px;
                  text-align: center;
                  border-bottom: 1px solid rgb(220, 222, 226);
                  height: 30px;
                  margin-right: 5px;
                "
                >{{ this.data.name }}</span
              >
              性别：
              <span
                style="
                  display: inline-block;
                  width: 40px;
                  text-align: center;
                  border-bottom: 1px solid rgb(220, 222, 226);
                  height: 30px;
                  margin-right: 5px;
                "
                >{{ this.data.sex }}</span
              >
              年龄：
              <span style="
                  display: inline-block;
                  width: 60px;
                  text-align: center;
                  border-bottom: 1px solid rgb(220, 222, 226);
                  height: 30px;
                  margin-right: 5px;
                "
                >{{ this.$store.state.user.severFall.ageOrMonthAge}}</span>
              床号：
              <span
                style="
                  display: inline-block;
                  width: 40px;
                  text-align: center;
                  border-bottom: 1px solid rgb(220, 222, 226);
                  height: 30px;
                  margin-right: 5px;
                "
                >{{ this.data.bed_code }}</span
              >
              住院号：
              <span
                style="
                  display: inline-block;
                  width: 100px;
                  text-align: center;
                  border-bottom: 1px solid rgb(220, 222, 226);
                  height: 30px;
                "
                >{{ this.data.visit_id }}</span
              >
              <span>
                转出科室：
                <el-select v-model="info.sourceDepartment" filterable clearable>
                  <el-option
                    v-for="item in listArr"
                    :key="item.id"
                    :label="item.department_name"
                    :value="item.department_name"
                  />
                </el-select>
              </span>
            </div>
            <div
              style="
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                margin-left: 25px;
              "
            >
              诊断：
              <span
                style="
                  display: inline-block;
                  width: 450px;
                  border-bottom: 1px solid rgb(220, 222, 226);
                  height: 30px;
                "
              >{{ this.data.diagnosis_name }}</span>
            </div>
            <div
              style="
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                margin-left: 25px;
                margin-top: 5px;
              "
            >
              <span>
                转入科室：
                <el-select v-model="info.targetDepartment" filterable clearable>
                  <el-option
                    v-for="item in listArr"
                    :key="item.id"
                    :label="item.department_name"
                    :value="item.department_name"
                  />
                </el-select>
              </span>
              <span style="margin-left: 160px">
                佩戴腕带：
                <el-radio-group v-model="info.wristTape">
                  <el-radio label="0">否</el-radio>
                  <el-radio label="1">是</el-radio>
                </el-radio-group>
              </span>
            </div>
          </div>
          <div class="two">
            <div
              style="
                width: 93px;
                height: 115px;
                border-right: 1px solid #808695;
                float: left;
                padding-top: 35px;
                text-align: center;
              "
            >
              病<br />
              情
            </div>
            <div style="width: 746px; height: 115px; float: left">
              <div
                style="
                  width: 740px;
                  height: 110px;
                  margin-left: 8px;
                  margin-top: 8px;
                "
              >
                <div>
                  <span style="color: #515a6e">
                    体征监测时间:
                    <el-date-picker
                      v-model="info.syncTime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    />
                  </span>
                </div>
                <div style="margin-top: 5px">
                  <span>
                    T:
                    <input
                      v-model="info.t"
                      autocomplete="off"
                      spellcheck="false"
                      type="text"
                      placeholder=""
                      class="tiwen"
                      style="left: 17px; width: 50px"
                    />
                    ℃
                  </span>
                  <span style="margin-left: 8px">
                    P:
                    <input
                      v-model="info.p"
                      autocomplete="off"
                      spellcheck="false"
                      type="text"
                      placeholder=""
                      class="tiwen"
                      style="left: 17px; width: 50px"
                    />
                    次/分
                  </span>
                  <span style="margin-left: 8px">
                    R:
                    <input
                      v-model="info.r"
                      autocomplete="off"
                      spellcheck="false"
                      type="text"
                      placeholder=""
                      class="tiwen"
                      style="left: 17px; width: 50px"
                    />
                    次/分
                  </span>
                  <span style="margin-left: 100px">
                    BP:
                    <input
                      v-model="info.bp"
                      autocomplete="off"
                      spellcheck="false"
                      type="text"
                      placeholder=""
                      class="tiwen"
                      style="left: 17px; width: 50px"
                    />
                    mmHg
                  </span>
                  <span style="margin-left: 8px">
                    SpO₂:
                    <input
                      v-model="info.spo2"
                      autocomplete="off"
                      spellcheck="false"
                      type="text"
                      placeholder=""
                      class="tiwen"
                      style="left: 17px; width: 50px"
                    />
                    %
                  </span>

                  <span style="float: left; margin-top: 12px">
                    意识：
                    <el-radio-group v-model="info.consciousness">
                      <el-radio label="1">清醒</el-radio>
                      <el-radio label="2">嗜睡</el-radio>
                      <el-radio label="3"> 谵妄</el-radio>
                      <el-radio label="4">浅昏迷</el-radio>
                      <el-radio label="5">深昏迷</el-radio>
                      <el-radio label="6">其它</el-radio>
                    </el-radio-group>
                    <input
                      v-model="info.otherConsciousness"
                      autocomplete="off"
                      spellcheck="false"
                      type="text"
                      placeholder=""
                      class="tiwen"
                      style="left: 17px; width: 150px"
                    />
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="three">
            <div
              style="
                float: left;
                width: 93px;
                height: 176px;
                border-right: 1px solid #808695;
                padding-top: 48px;
                text-align: center;
              "
            >
              静<br />
              脉<br />
              输<br />
              液<br />
            </div>
            <div style="float: left; width: 740px; height: 176px">
              <div style="float: left; width: 740px; margin-top: 14px">
                <span style="margin-top: 17px; margin-left: 6px">
                  类型：
                  <el-radio-group v-model="info.infusionPunctureType">
                    <el-radio label="1">周围静脉钢针</el-radio>
                    <el-radio label="2">周围静脉置管</el-radio>
                    <el-radio label="3">深静脉置管</el-radio>
                    <el-radio label="4">PICC</el-radio>
                  </el-radio-group>
                </span>
              </div>
              <div style="float: left; width: 740px; margin-top: 12px">
                <span style="margin-top: 17px; margin-left: 6px">
                  通畅：
                  <el-radio-group v-model="info.infustionClear">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="2">否</el-radio>
                  </el-radio-group>
                </span>
              </div>
              <div style="float: left; width: 740px; margin-top: 12px">
                <span style="margin-top: 17px; margin-left: 6px">
                  静脉输液：
                  <el-radio-group v-model="info.isInfustioning">
                    <el-radio label="1">无</el-radio>
                    <el-radio label="2">有</el-radio>
                  </el-radio-group>
                </span>
                <span style="margin-left: 120px">
                  输液通路:
                  <input
                    v-model="info.infustionPathNum"
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="left: 17px; width: 50px"
                  />
                  组
                </span>
              </div>
              <div style="float: left; width: 740px; margin-top: 12px">
                <span style="margin-top: 17px; margin-left: 6px">
                  输注中药液:
                  <input
                    v-model="info.infustionDrug"
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="left: 17px; width: 625px"
                    maxlength="255"
                  />
                </span>
              </div>
              <div style="float: left; width: 740px; margin-top: 12px">
                <span style="margin-top: 17px; margin-left: 6px">
                  剩余约:
                  <input
                    v-model="info.infustionLeftOver"
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="left: 17px; width: 125px"
                  />
                  ml
                </span>
              </div>
            </div>
          </div>
          <div class="four">
            <div
              style="
                float: left;
                width: 93px;
                height: 139px;
                border-right: 1px solid #808695;
                padding-top: 19px;
                text-align: center;
              "
            >
              皮<br />
              肤<br />
              完<br />
              整<br />
              性<br />
            </div>
            <div>
              <div style="float: left; width: 740px; margin-top: 14px">
                <span style="margin-top: 17px; margin-left: 6px" class="sp">
                  <el-radio-group v-model="info.skinComplete">
                    <el-radio label="1">完整</el-radio>
                    <el-radio label="2">压疮</el-radio
                    ><span style="margin-left: 40px"> 情况描述 </span>
                    <el-radio label="3">破损</el-radio>
                    <el-radio label="4">其他</el-radio>
                  </el-radio-group>
                </span>
              </div>
            </div>
          </div>
          <div class="five">
            <div
              style="
                float: left;
                width: 93px;
                height: 252px;
                border-right: 1px solid #808695;
                padding-top: 86px;
                text-align: center;
              "
            >
              各<br />
              种<br />
              管<br />
              路<br />
            </div>
            <div
              style="
                float: left;
                width: 745px;
                height: 72px;
                border-bottom: 1px solid #808695;
              "
            >
              <div
                style="
                  float: left;
                  width: 93px;
                  height: 252px;
                  border-right: 1px solid #808695;
                  padding-top: 26px;
                  text-align: center;
                "
              >
                人工气道
              </div>
              <div style="width: 740px; margin-top: 12px">
                <div style="float: left">
                  <span style="margin-top: 17px">
                    <span
                      style="margin-left: 10px; display: block; height: 10px"
                    >
                      <el-radio-group v-model="info.hasArtificialAirway">
                        <el-radio label="1">有</el-radio>
                      </el-radio-group>
                    </span>
                    <br />
                    <span
                      style="margin-left: 10px; display: block; height: 10px"
                    >
                      <el-radio-group v-model="info.hasArtificialAirway">
                        <el-radio label="2">无</el-radio>
                      </el-radio-group>
                    </span>
                  </span>
                  <span
                    v-if="info.hasArtificialAirway === '1'"
                    style="float: left; margin-left: 98px; margin-top: -34px"
                  >
                    <el-radio-group v-model="info.artificialAirwayType">
                      <el-radio label="1">气管插管</el-radio>
                      <el-radio label="2">气管切开</el-radio>
                    </el-radio-group>
                  </span>
                </div>
              </div>
            </div>
            <div style="float: left; width: 744px; height: 180px">
              <div
                style="
                  float: left;
                  width: 93px;
                  height: 180px;
                  border-right: 1px solid #808695;
                  padding-top: 86px;
                  text-align: center;
                "
              >
                引流管
              </div>
              <div style="float: left; width: 651px; height: 180px">
                <div
                  style="
                    float: left;
                    width: 68px;
                    height: 180px;
                    border-right: 1px solid #808695;
                    padding-top: 80px;
                    text-align: center;
                  "
                >
                  <el-radio-group v-model="info.hasDrainageTube">
                    <el-radio label="1">无</el-radio>
                  </el-radio-group>
                </div>
                <div style="float: left; width: 583px; height: 180px">
                  <div
                    style="
                      float: left;
                      width: 113px;
                      height: 180px;
                      padding-top: 80px;
                      padding-left: 13px;
                    "
                  >
                    <el-radio-group v-model="info.hasDrainageTube">
                      <el-radio label="2">有</el-radio>
                    </el-radio-group>
                  </div>
                  <div style="float: left; width: 470px; height: 180px">
                    <div
                      v-show="this.info.hasDrainageTube === '2'"
                      class="che"
                      style="margin: 20px 180px 0px 42px"
                    >
                      <el-checkbox-group
                        v-model="info.drainageTubeList"
                        @change="clickChange"
                      >
                        <el-checkbox label="1">导尿管</el-checkbox>
                        <el-checkbox style="margin-left: 28px" label="2"
                          >盆腔引流管</el-checkbox
                        >
                        <el-checkbox label="3">皮下引流管</el-checkbox>
                        <el-checkbox label="4">T管</el-checkbox>
                        <el-checkbox label="5">头部引流管</el-checkbox>
                        <el-checkbox label="6">颈部引流管</el-checkbox>
                        <el-checkbox label="7">胸腔引流管</el-checkbox>
                        <el-checkbox label="8">腹腔引流管</el-checkbox>
                        <el-checkbox label="9">其他</el-checkbox>
                      </el-checkbox-group>
                      <span
                        style="
                          float: left;
                          margin-left: 66px;
                          margin-top: -30px;
                        "
                      >
                        <input
                          v-model="info.otherDrainageTube"
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          placeholder=""
                          class="tiwen"
                          style="left: 17px; width: 180px"
                        />
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="six">
            <div
              style="
                float: left;
                width: 93px;
                height: 125px;
                border-right: 1px solid #808695;
                padding-top: 43px;
                text-align: center;
              "
            >
              其<br />它<br />
            </div>
            <div style="float: left; width: 746px; height: 126px">
              <div
                style="
                  width: 747px;
                  height: 42px;
                  float: left;
                  border-bottom: 1px solid #808695;
                "
              >
                <span style="float: left; margin-top: 12px; margin-left: 10px">
                  病例：
                  <el-radio-group v-model="info.hasMedicalRecord">
                    <el-radio label="1">无</el-radio>
                    <el-radio label="2">有</el-radio>
                  </el-radio-group>
                </span>
              </div>
              <div
                style="
                  width: 746px;
                  height: 42px;
                  float: left;
                  border-bottom: 1px solid #808695;
                "
              >
                <span style="float: left; margin-top: 12px; margin-left: 10px">
                  病人特殊物品：
                  <el-radio-group v-model="info.hasSpecialThing">
                    <el-radio label="1">无</el-radio>
                    <el-radio label="2">有</el-radio>
                  </el-radio-group>
                  <input
                    v-if="info.hasSpecialThing === '2'"
                    v-model="info.specialThing"
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    class="tiwen"
                    style="left: 17px; width: 180px"
                  />
                </span>
              </div>
              <div style="width: 746px; height: 42px; float: left">
                <span style="float: left; margin-top: 12px; margin-left: 10px">
                  特殊交接：
                  <input
                    v-model="info.specialTransfer"
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    class="tiwen"
                    style="left: 17px; width: 180px"
                    maxlength="255"
                  />
                </span>
              </div>
            </div>
          </div>
          <div class="seven">
            <div
              style="
                width: 420px;
                height: 71px;
                float: left;
                border-right: 1px solid #808695;
              "
            >
              <div
                class="zhuan"
                style="
                  float: left;
                  margin-bottom: 4px;
                  margin-left: 10px;
                  margin-top: 4px;
                "
              >
                转出科室护士签字:
                <el-select
                  v-model="info.transferNurseSignature"
                  placeholder="请选择"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in arrName"
                    :key="item.id"
                    :label="item.user_name"
                    :value="item.login_name"
                  />
                </el-select>
              </div>
              <div class="zhuan" style="float: left; margin-left: 10px">
                转入科室护士签字:
                <el-select
                  v-model="info.inNurseSignature"
                  placeholder="请选择"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in arrName"
                    :key="item.id"
                    :label="item.user_name"
                    :value="item.login_name"
                  />
                </el-select>
              </div>
            </div>
            <div style="width: 420px; height: 71px; float: left">
              <div
                class="zhuan"
                style="float: left; margin-bottom: 4px; margin-left: 10px"
              >
                出科时间:
                <el-date-picker
                  v-model="info.transferTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </div>
              <div
                class="zhuan"
                style="
                  float: left;
                  margin-bottom: 7px;
                  margin-left: 10px;
                  margin-top: 4px;
                "
              >
                入科时间:
                <el-date-picker
                  v-model="info.inTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </div>
            </div>
          </div>
        </div>
        <div style="text-align: center; margin-top: 1px">
          第{{ this.pageNum }}页
        </div>
      </div>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
        <el-button type="primary" @click="btnClickPrint">打印</el-button>
        <div id="tableId" style="height: 1150px">
          <div class="mainBox" style="height: 1100px">
            <div
              style="
                text-align: center;
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 8px;
              "
            >
              住院患者转科交接单
            </div>
            <div class="warp">
              <div class="one">
                <div
                  style="
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    margin-left: 25px;
                    margin-top: 4px;
                  "
                >
                  姓名：
                  <span
                    style="
                      display: inline-block;
                      width: 70px;
                      text-align: center;
                      border-bottom: 1px solid rgb(220, 222, 226);
                      height: 30px;
                      margin-right: 5px;
                    "
                    >{{ this.data.name }}</span
                  >
                  性别：
                  <span
                    style="
                      display: inline-block;
                      width: 40px;
                      text-align: center;
                      border-bottom: 1px solid rgb(220, 222, 226);
                      height: 30px;
                      margin-right: 5px;
                    "
                    >{{ this.data.sex }}</span
                  >
                  年龄：
                  <span style="
                  display: inline-block;
                  width: 60px;
                  text-align: center;
                  border-bottom: 1px solid rgb(220, 222, 226);
                  height: 30px;
                  margin-right: 5px;
                "
                  >{{ this.$store.state.user.severFall.ageOrMonthAge}}</span>
                  床号：
                  <span
                    style="
                      display: inline-block;
                      width: 40px;
                      text-align: center;
                      border-bottom: 1px solid rgb(220, 222, 226);
                      height: 30px;
                      margin-right: 5px;
                    "
                    >{{ this.data.bed_code }}</span
                  >
                  住院号：
                  <span
                    style="
                      display: inline-block;
                      width: 100px;
                      text-align: center;
                      border-bottom: 1px solid rgb(220, 222, 226);
                      height: 30px;
                    "
                    >{{ this.data.visit_id }}</span
                  >
                  <span>
                    转出科室：
                    <el-select
                      v-model="info.sourceDepartment"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in listArr"
                        :key="item.id"
                        :label="item.department_name"
                        :value="item.department_name"
                      />
                    </el-select>
                  </span>
                </div>
                <div
                  style="
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    margin-left: 25px;
                  "
                >
                  诊断：
                  <span
                    style="
                      display: inline-block;
                      width: 450px;
                      border-bottom: 1px solid rgb(220, 222, 226);
                      height: 30px;
                    "
                  >{{ this.data.diagnosis_name }}</span>
                </div>
                <div
                  style="
                    display: inline-flex;
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    float: left;
                    margin-left: 25px;
                    margin-top: 5px;
                  "
                >
                  <span>
                    转入科室：
                    <el-select
                      v-model="info.targetDepartment"
                      filterable
                      clearable
                    >
                      <el-option
                        v-for="item in listArr"
                        :key="item.id"
                        :label="item.department_name"
                        :value="item.department_name"
                      />
                    </el-select>
                  </span>
                  <span style="margin-left: 160px">
                    佩戴腕带：
                    <el-radio-group v-model="info.wristTape">
                      <el-radio label="0">否</el-radio>
                      <el-radio label="1">是</el-radio>
                    </el-radio-group>
                  </span>
                </div>
              </div>
              <div class="two">
                <div
                  style="
                    width: 93px;
                    height: 115px;
                    border-right: 1px solid #808695;
                    float: left;
                    padding-top: 35px;
                    text-align: center;
                  "
                >
                  病<br />
                  情
                </div>
                <div style="width: 746px; height: 115px; float: left">
                  <div
                    style="
                      width: 740px;
                      height: 110px;
                      margin-left: 8px;
                      margin-top: 8px;
                    "
                  >
                    <div>
                      <span style="color: #515a6e">
                        体征监测时间:
                        <el-date-picker
                          v-model="info.syncTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                        />
                      </span>
                    </div>
                    <div style="margin-top: 5px">
                      <span>
                        T:
                        <input
                          v-model="info.t"
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          placeholder=""
                          class="tiwen"
                          style="left: 17px; width: 50px"
                        />
                        ℃
                      </span>
                      <span style="margin-left: 8px">
                        P:
                        <input
                          v-model="info.p"
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          placeholder=""
                          class="tiwen"
                          style="left: 17px; width: 50px"
                        />
                        次/分
                      </span>
                      <span style="margin-left: 8px">
                        R:
                        <input
                          v-model="info.r"
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          placeholder=""
                          class="tiwen"
                          style="left: 17px; width: 50px"
                        />
                        次/分
                      </span>
                      <span style="margin-left: 100px">
                        BP:
                        <input
                          v-model="info.bp"
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          placeholder=""
                          class="tiwen"
                          style="left: 17px; width: 50px"
                        />
                        mmHg
                      </span>
                      <span style="margin-left: 8px">
                        SpO₂:
                        <input
                          v-model="info.spo2"
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          placeholder=""
                          class="tiwen"
                          style="left: 17px; width: 50px"
                        />
                        %
                      </span>

                      <span style="float: left; margin-top: 12px">
                        意识：
                        <el-radio-group v-model="info.consciousness">
                          <el-radio label="1">清醒</el-radio>
                          <el-radio label="2">嗜睡</el-radio>
                          <el-radio label="3"> 谵妄</el-radio>
                          <el-radio label="4">浅昏迷</el-radio>
                          <el-radio label="5">深昏迷</el-radio>
                          <el-radio label="6">其它</el-radio>
                        </el-radio-group>
                        <input
                          v-model="info.otherConsciousness"
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          placeholder=""
                          class="tiwen"
                          style="left: 17px; width: 150px"
                        />
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="three">
                <div
                  style="
                    float: left;
                    width: 93px;
                    height: 176px;
                    border-right: 1px solid #808695;
                    padding-top: 48px;
                    text-align: center;
                  "
                >
                  静<br />
                  脉<br />
                  输<br />
                  液<br />
                </div>
                <div style="float: left; width: 740px; height: 176px">
                  <div style="float: left; width: 740px; margin-top: 14px">
                    <span style="margin-top: 17px; margin-left: 6px">
                      类型：
                      <el-radio-group v-model="info.infusionPunctureType">
                        <el-radio label="1">周围静脉钢针</el-radio>
                        <el-radio label="2">周围静脉置管</el-radio>
                        <el-radio label="3">深静脉置管</el-radio>
                        <el-radio label="4">PICC</el-radio>
                      </el-radio-group>
                    </span>
                  </div>
                  <div style="float: left; width: 740px; margin-top: 12px">
                    <span style="margin-top: 17px; margin-left: 6px">
                      通畅：
                      <el-radio-group v-model="info.infustionClear">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="2">否</el-radio>
                      </el-radio-group>
                    </span>
                  </div>
                  <div style="float: left; width: 740px; margin-top: 12px">
                    <span style="margin-top: 17px; margin-left: 6px">
                      静脉输液：
                      <el-radio-group v-model="info.isInfustioning">
                        <el-radio label="1">无</el-radio>
                        <el-radio label="2">有</el-radio>
                      </el-radio-group>
                    </span>
                    <span style="margin-left: 120px">
                      输液通路:
                      <input
                        v-model="info.infustionPathNum"
                        autocomplete="off"
                        spellcheck="false"
                        type="text"
                        placeholder=""
                        class="tiwen"
                        style="left: 17px; width: 50px"
                      />
                      组
                    </span>
                  </div>
                  <div style="float: left; width: 740px; margin-top: 12px">
                    <span style="margin-top: 17px; margin-left: 6px">
                      输注中药液:
                      <input
                        v-model="info.infustionDrug"
                        autocomplete="off"
                        spellcheck="false"
                        type="text"
                        placeholder=""
                        class="tiwen"
                        style="left: 17px; width: 625px"
                      />
                    </span>
                  </div>
                  <div style="float: left; width: 740px; margin-top: 12px">
                    <span style="margin-top: 17px; margin-left: 6px">
                      剩余约:
                      <input
                        v-model="info.infustionLeftOver"
                        autocomplete="off"
                        spellcheck="false"
                        type="text"
                        placeholder=""
                        class="tiwen"
                        style="left: 17px; width: 125px"
                      />
                      ml
                    </span>
                  </div>
                </div>
              </div>
              <div class="four">
                <div
                  style="
                    float: left;
                    width: 93px;
                    height: 139px;
                    border-right: 1px solid #808695;
                    padding-top: 19px;
                    text-align: center;
                  "
                >
                  皮<br />
                  肤<br />
                  完<br />
                  整<br />
                  性<br />
                </div>
                <div>
                  <div style="float: left; width: 740px; margin-top: 14px">
                    <span style="margin-top: 17px; margin-left: 6px" class="sp">
                      <el-radio-group v-model="info.skinComplete">
                        <el-radio label="1">完整</el-radio>
                        <el-radio label="2">压疮</el-radio
                        ><span style="margin-left: 40px"> 情况描述 </span>
                        <el-radio label="3">破损</el-radio>
                        <el-radio label="4">其他</el-radio>
                      </el-radio-group>
                    </span>
                  </div>
                </div>
              </div>
              <div class="five">
                <div
                  style="
                    float: left;
                    width: 93px;
                    height: 252px;
                    border-right: 1px solid #808695;
                    padding-top: 86px;
                    text-align: center;
                  "
                >
                  各<br />
                  种<br />
                  管<br />
                  路<br />
                </div>
                <div
                  style="
                    float: left;
                    width: 745px;
                    height: 72px;
                    border-bottom: 1px solid #808695;
                  "
                >
                  <div
                    style="
                      float: left;
                      width: 93px;
                      height: 252px;
                      border-right: 1px solid #808695;
                      padding-top: 26px;
                      text-align: center;
                    "
                  >
                    人工气道
                  </div>
                  <div style="width: 740px; margin-top: 12px">
                    <div style="float: left">
                      <span style="margin-top: 17px">
                        <span
                          style="
                            margin-left: 10px;
                            display: block;
                            height: 10px;
                          "
                        >
                          <el-radio-group v-model="info.hasArtificialAirway">
                            <el-radio label="1">有</el-radio>
                          </el-radio-group>
                        </span>
                        <br />
                        <span
                          style="
                            margin-left: 10px;
                            display: block;
                            height: 10px;
                          "
                        >
                          <el-radio-group v-model="info.hasArtificialAirway">
                            <el-radio label="2">无</el-radio>
                          </el-radio-group>
                        </span>
                      </span>
                      <span
                        v-if="info.hasArtificialAirway === '1'"
                        style="
                          float: left;
                          margin-left: 98px;
                          margin-top: -34px;
                        "
                      >
                        <el-radio-group v-model="info.artificialAirwayType">
                          <el-radio label="1">气管插管</el-radio>
                          <el-radio label="2">气管切开</el-radio>
                        </el-radio-group>
                      </span>
                    </div>
                  </div>
                </div>
                <div style="float: left; width: 744px; height: 180px">
                  <div
                    style="
                      float: left;
                      width: 93px;
                      height: 180px;
                      border-right: 1px solid #808695;
                      padding-top: 86px;
                      text-align: center;
                    "
                  >
                    引流管
                  </div>
                  <div style="float: left; width: 651px; height: 180px">
                    <div
                      style="
                        float: left;
                        width: 68px;
                        height: 180px;
                        border-right: 1px solid #808695;
                        padding-top: 80px;
                        text-align: center;
                      "
                    >
                      <el-radio-group v-model="info.hasDrainageTube">
                        <el-radio label="1">无</el-radio>
                      </el-radio-group>
                    </div>
                    <div style="float: left; width: 583px; height: 180px">
                      <div
                        style="
                          float: left;
                          width: 113px;
                          height: 180px;
                          padding-top: 80px;
                          padding-left: 13px;
                        "
                      >
                        <el-radio-group v-model="info.hasDrainageTube">
                          <el-radio label="2">有</el-radio>
                        </el-radio-group>
                      </div>
                      <div style="float: left; width: 470px; height: 180px">
                        <div
                          v-show="this.info.hasDrainageTube === '2'"
                          class="che"
                          style="margin: 20px 180px 0px 42px"
                        >
                          <el-checkbox-group
                            v-model="info.drainageTubeList"
                            @change="clickChange"
                          >
                            <el-checkbox label="1">导尿管</el-checkbox>
                            <el-checkbox style="margin-left: 28px" label="2"
                              >盆腔引流管</el-checkbox
                            >
                            <el-checkbox label="3">皮下引流管</el-checkbox>
                            <el-checkbox label="4">T管</el-checkbox>
                            <el-checkbox label="5">头部引流管</el-checkbox>
                            <el-checkbox label="6">颈部引流管</el-checkbox>
                            <el-checkbox label="7">胸腔引流管</el-checkbox>
                            <el-checkbox label="8">腹腔引流管</el-checkbox>
                            <el-checkbox label="9">其他</el-checkbox>
                          </el-checkbox-group>
                          <span
                            style="
                              float: left;
                              margin-left: 66px;
                              margin-top: -30px;
                            "
                          >
                            <input
                              v-model="info.otherDrainageTube"
                              autocomplete="off"
                              spellcheck="false"
                              type="text"
                              placeholder=""
                              class="tiwen"
                              style="left: 17px; width: 180px"
                            />
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="six">
                <div
                  style="
                    float: left;
                    width: 93px;
                    height: 125px;
                    border-right: 1px solid #808695;
                    padding-top: 43px;
                    text-align: center;
                  "
                >
                  其<br />它<br />
                </div>
                <div style="float: left; width: 746px; height: 126px">
                  <div
                    style="
                      width: 747px;
                      height: 42px;
                      float: left;
                      border-bottom: 1px solid #808695;
                    "
                  >
                    <span
                      style="float: left; margin-top: 12px; margin-left: 10px"
                    >
                      病例：
                      <el-radio-group v-model="info.hasMedicalRecord">
                        <el-radio label="1">无</el-radio>
                        <el-radio label="2">有</el-radio>
                      </el-radio-group>
                    </span>
                  </div>
                  <div
                    style="
                      width: 746px;
                      height: 42px;
                      float: left;
                      border-bottom: 1px solid #808695;
                    "
                  >
                    <span
                      style="float: left; margin-top: 12px; margin-left: 10px"
                    >
                      病人特殊物品：
                      <el-radio-group v-model="info.hasSpecialThing">
                        <el-radio label="1">无</el-radio>
                        <el-radio label="2">有</el-radio>
                      </el-radio-group>
                      <input
                        v-if="info.hasSpecialThing === '2'"
                        v-model="info.specialThing"
                        autocomplete="off"
                        spellcheck="false"
                        type="text"
                        class="tiwen"
                        style="left: 17px; width: 180px"
                      />
                    </span>
                  </div>
                  <div style="width: 746px; height: 42px; float: left">
                    <span
                      style="float: left; margin-top: 12px; margin-left: 10px"
                    >
                      特殊交接：
                      <input
                        v-model="info.specialTransfer"
                        autocomplete="off"
                        spellcheck="false"
                        type="text"
                        class="tiwen"
                        style="left: 17px; width: 180px"
                      />
                    </span>
                  </div>
                </div>
              </div>
              <div class="seven">
                <div
                  style="
                    width: 420px;
                    height: 71px;
                    float: left;
                    border-right: 1px solid #808695;
                  "
                >
                  <div
                    class="zhuan"
                    style="
                      float: left;
                      margin-bottom: 4px;
                      margin-left: 10px;
                      margin-top: 4px;
                    "
                  >
                    转出科室护士签字:
                    <el-select
                      v-model="info.transferNurseSignature"
                      placeholder="请选择"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in arrName"
                        :key="item.id"
                        :label="item.user_name"
                        :value="item.login_name"
                      />
                    </el-select>
                  </div>
                  <div class="zhuan" style="float: left; margin-left: 10px">
                    转入科室护士签字:
                    <el-select
                      v-model="info.inNurseSignature"
                      placeholder="请选择"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in arrName"
                        :key="item.id"
                        :label="item.user_name"
                        :value="item.login_name"
                      />
                    </el-select>
                  </div>
                </div>
                <div style="width: 420px; height: 71px; float: left">
                  <div
                    class="zhuan"
                    style="float: left; margin-bottom: 4px; margin-left: 10px"
                  >
                    出科时间:
                    <el-date-picker
                      v-model="info.transferTime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    />
                  </div>
                  <div
                    class="zhuan"
                    style="
                      float: left;
                      margin-bottom: 7px;
                      margin-left: 10px;
                      margin-top: 4px;
                    "
                  >
                    入科时间:
                    <el-date-picker
                      v-model="info.inTime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <div
        style="
          position: fixed;
          right: 0;
          bottom: 0;
          z-index: 9;
          width: 100%;
          height: 56px;
          line-height: 56px;
          padding: 0 60px 0 18px;
          background: #fff;
          border-top: 1px solid #e8eaec;
          box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
        "
      >
        <el-button
          type="primary"
          style="position: absolute; right: 20px; top: 8px"
          @click="btn"
          :disabled="garbage"
          >保存</el-button
        >

        <el-button
          type="primary"
          style="position: absolute; right: 102px; top: 8px"
          @click="daying"
          :disabled="garbage"
          >打印</el-button
        >
        <el-button
          type="primary"
          style="position: absolute; right: 185px; top: 8px"
          @click="reload"
          :disabled="garbage"
          >刷新</el-button
        >

        <el-button
          type="primary"
          style="position: absolute; right: 270px; top: 8px"
          @click="histion()"
          :disabled="garbage"
          >历史记录</el-button
        >
        <span style="position: absolute; right: 500px; top: 1px">
          设置页码：
          <input
            v-model="pageNum"
            autocomplete="off"
            spellcheck="false"
            type="text"
            placeholder=""
            oninput="value=value.replace(/[^0-9.]/g,'')"
            style="width: 100px; height: 30px"
          />
        </span>
      </div>
      <el-drawer title="评估列表" :visible.sync="table" direction="rtl">
        <el-table :data="gridData">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
          />
          <el-table-column
            property="data_time"
            label="评估时间"
            width="150"
            align="center"
          />
          <el-table-column
            property="user_name"
            label="评估人"
            width="150"
            align="center"
          />
          <el-table-column label="操作" width="154" align="center">
            <template slot-scope="scope">
              <el-button
                slot="reference"
                size="mini"
                style="margin-left: 10px"
                type="primary"
                @click="choice(scope)"
                >选择</el-button
              >
              <el-popover
                :ref="`popover-${scope.$index}`"
                trigger="click"
                placement="top"
                width="100"
              >
                <p class="el-icon-warning">确定删除</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="no(scope)"
                    >取消</el-button
                  >
                  <el-button type="primary" size="mini" @click="yes(scope)"
                    >确定</el-button
                  >
                </div>
                <el-button
                  slot="reference"
                  size="mini"
                  style="margin-left: 10px"
                  type="danger"
                  >删除</el-button
                >
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import { printExcel } from "@/utils/config"; // 导入模块
import { jyxdPagePrint } from "@/utils/jyxd-page-printer.js";
import {
  getPatientSource,
  getUserListByUserType,
  transferAssessmentSaveData,
  transferAssessmentGetList,
  transferAssessmentDeleteData,
  patientgetList,
  transferAssessmentChooseData,
  deparqueryList,
  usergetList,
  findPage,
} from "@/api/table";
import { Message } from "element-ui";
import { edit } from "../../api/table";
export default {
  data() {
    return {
      pageNum: 1,
      printParam: {
        print_id: "print-div", //完整打印区域最外包裹, id名
        paper_height: "1240", //纸张长度，目前不自动分页，页面代码自行设计分页模式
        paper_width: "850", //纸张宽度，根据横向纵向调整，影响页面折行效果
        preview: "",
      },

      dialogVisible: false,
      age: "",
      data: {},
      listArr: [],
      garbage: false,
      arrName: [],
      yinping: "",
      table: false,
      gridData: [],
      info: {
        dataTime: "",
        sourceDepartment: "",
        diagnosisName: "",
        wristTape: "",
        syncTime: "",
        t: "",
        p: "",
        r: "",
        bp: "",
        spo2: "",
        otherConsciousness: "",
        consciousness: "",
        infusionPunctureType: "",
        infustionClear: "",
        isInfustioning: "",
        infustionPathNum: "",
        infustionDrug: "",
        infustionLeftOver: "",
        skinComplete: "",
        skinOtherDescription: "",
        hasArtificialAirway: "",
        artificialAirwayType: "",
        hasDrainageTube: "",
        drainageTubeList: [],
        otherDrainageTube: "",
        hasMedicalRecord: "",
        hasSpecialThing: "",
        specialThing: "",
        specialTransfer: "",
        transferNurseSignature: "",
        transferTime: "",
        inNurseSignature: "",
        inTime: "",
        visitId: "",
        visitCode: "",
        patientId: ""
      },
    };
  },
  computed: {
    getData() {
      return this.$store.state.user.severFall;
    },
  },
  watch: {
    getData: {
      handler(nVal) {
        if (this.$store.state.user.severFall == undefined) {
          this.$message({
            message: "请先选择病人",
            type: "warning",
          });
        } else {
          this.data = this.$store.state.user.severFall;
          this.info.diagnosisName = this.data.diagnosis_name;
          this.info.sourceDepartment = this.data.department_name;
          this.info.visitId = this.data.visit_id;
          this.info.visitCode = this.data.visit_code;
          this.info.patientId = this.data.patient_id;
          deparqueryList().then((res) => {
            this.listArr = res.data;
          });
          this.findPageByPatientId();
          if (
            this.data.unplanned == "" ||
            this.data.unplanned == null ||
            this.data.unplanned == 0
          ) {
            this.garbage = true;
            alert("请在首页补全患者信息");
            // this.$message({
            //   message: "请在首页补全患者信息",
            //   type: "warning",
            //   duration: 1500,
            // });
            return;
          } else {
            this.garbage = false;
          }
        }
      },
      deep: true,
    },
  },
  created() {
    this.data = this.$store.state.user.severFall;
    patientgetList({ visitId: this.data.visit_id }).then((res) => {
      if (res.data[0].age !== "") {
        this.age = res.data[0].age;
      }
    });
  },
  mounted() {
    this.getNowDate();
    this.data = this.$store.state.user.severFall;
    if (
      typeof this.data.patient_id != "string" ||
      this.data.patient_id.length < 1
    ) {
      alert("请选择一次病人");
    } else {
      this.huli();
    }
    patientgetList({ visitId: this.data.visit_id }).then((res) => {
      if (res.data[0].age !== "") {
        this.age = res.data[0].age;
      }
    });
  },
  methods: {
    //设置页码
    findPageByPatientId() {
      findPage({
        patientId: this.data.patient_id,
      }).then((res) => {
        if (res.data != null && res.data.length > 0) {
          this.pageNum = res.data[0].pageNum;
        } else {
          this.pageNum = 1;
        }
      });
    },
    // 当用户输入内容开始远程搜索模糊查询的时候，会触发remoteMethod方法
    remoteMethod(query) {
      if (query !== "") {
        let callBackArr = [];
        usergetList({
          workNumber: query,
        }).then((res) => {
          this.arrName = res.data;
        });
      }
    },
    huli() {
      this.data = this.$store.state.user.severFall;
      (this.info.visitId = this.data.visit_id),
        (this.info.visitCode = this.data.visit_code),
        (this.info.patientId = this.data.patient_id);
      this.findPageByPatientId();
      if (
        this.data.unplanned == "" ||
        this.data.unplanned == null ||
        this.data.unplanned == 0
      ) {
        this.garbage = true;
        alert("请在首页补全患者信息");
        // this.$message({
        //   message: "请在首页补全患者信息",
        //   type: "warning",
        //   duration: 1500,
        // });
        return;
      } else {
        this.garbage = false;
      }
      deparqueryList().then((res) => {
        this.listArr = res.data;
      });
      // 签名
      getUserListByUserType().then((res) => {
        this.arrName = res.data;
      });
    },
    // 刷新
    reload() {
      this.info = {
        dataTime: "",
        sourceDepartment: "",
        diagnosisName: "",
        wristTape: "",
        syncTime: "",
        t: "",
        p: "",
        r: "",
        bp: "",
        spo2: "",
        otherConsciousness: "",
        consciousness: "",
        infusionPunctureType: "",
        infustionClear: "",
        isInfustioning: "",
        infustionPathNum: "",
        infustionDrug: "",
        infustionLeftOver: "",
        skinComplete: "",
        skinOtherDescription: "",
        hasArtificialAirway: "",
        artificialAirwayType: "",
        hasDrainageTube: "",
        drainageTubeList: [],
        otherDrainageTube: "",
        hasMedicalRecord: "",
        hasSpecialThing: "",
        specialThing: "",
        specialTransfer: "",
        transferNurseSignature: "",
        transferTime: "",
        inNurseSignature: "",
        inTime: "",
        visitId: "",
        visitCode: "",
        patientId: "",
      };
      this.getNowDate();
      if (
        typeof this.data.patient_id != "string" ||
        this.data.patient_id.length < 1
      ) {
        alert("请选择一次病人");
      } else {
        this.huli();
      }
    },
    getNowDate() {
      var date = new Date();
      // 年
      var year = date.getFullYear();
      // 月
      var month = date.getMonth() + 1;
      // 日
      var day = date.getDate();
      // 时
      var hh = date.getHours();
      // 分
      var mm = date.getMinutes();
      // 秒
      var ss = date.getSeconds();
      if (Number(hh) < 10) {
        hh = "0" + hh;
      }
      if (Number(mm) < 10) {
        mm = "0" + mm;
      }
      if (Number(ss) < 10) {
        ss = "0" + ss;
      }
      this.info.dataTime =
        year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
    },
    daying() {
      if (
        typeof this.data.patient_id != "string" ||
        this.data.patient_id.length < 1
      ) {
        alert("请选择一次病人");
      } else {
        jyxdPagePrint(this.printParam);
      }

      //this.dialogVisible=true
    },
    btnClickPrint() {
      printExcel("tableId");
    },
    btn() {
      if (
        typeof this.data.patient_id != "string" ||
        this.data.patient_id.length < 1
      ) {
        alert("请选择一次病人");
      } else {
        if (!this.info.patientId) {
          this.info.patientId = this.data.patient_id;
        }
        const info = JSON.parse(JSON.stringify(this.info));
        info.drainageTubeList = info.drainageTubeList.join(",");
        info.assessment_Id = this.yinping;
        console.log(info, "打木架看");
        transferAssessmentSaveData(info).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "保存成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "保存失败",
              type: "success",
            });
          }
        });
      }
    },
    histion() {
      if (
        typeof this.data.patient_id != "string" ||
        this.data.patient_id.length < 1
      ) {
        alert("请选择一次病人");
      } else {
        this.table = true;
        if (this.data.patient_id) {
          transferAssessmentGetList({
            status: 1,
            patientId: this.data.patient_id,
          }).then((res) => {
            this.gridData = res.data;
          });
        }
      }
    },
    // 选择
    choice(scope) {
      const ids = scope.row.assessment_id;
      this.yinping = scope.row.assessment_id;
      transferAssessmentChooseData({
        status: 1,
        patientId: this.data.patient_id,
        assessmentId: ids,
      }).then((res) => {
        this.info = res.data;
        this.info.drainageTubeList = this.info.drainageTubeList.split(",");
      });
    },
    yes(scope) {
      // 可以在这里执行删除数据的回调操作.......删除操作......
      transferAssessmentDeleteData({
        assessmentId: scope.row.assessment_id,
        status: 1,
        patientId: this.data.patient_id,
      }).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.histion();
      });
      scope._self.$refs[`popover-${scope.$index}`].doClose();
    },
    no(scope) {
      this.$message("取消删除");
      scope._self.$refs[`popover-${scope.$index}`].doClose();
    },
    clickChange() {
      console.log(this.info.drainageTubeList, "11111");
    },
  },
};
</script>

<style scoped>
::v-deep .el-input__inner {
  height: 30px !important;
}
::v-deep .el-input__icon {
  line-height: 32px !important;
}
.line {
  text-align: center;
}
.block {
  position: absolute;
  top: 39px;
  right: 14%;
}
.warp {
  width: 840px;
  height: auto;
  border: 1px solid #808695;
  margin: 0 auto;
}
.one {
  width: 839px;
  height: 103px;
  border-bottom: 1px solid #808695;
}
.one /deep/ .el-input__inner {
  width: 146px !important;
}
.two {
  width: 839px;
  height: 115px;
  border-bottom: 1px solid #808695;
}
.two /deep/ .el-input__inner {
  border: none;
  width: 220px;
  border-bottom: 1px solid #808695;
}
.three {
  width: 839px;
  height: 176px;
  border-bottom: 1px solid #808695;
}
.three /deep/ .el-input__inner {
  border: none;
  width: 220px;
  border-bottom: 1px solid #808695;
}
.four {
  width: 839px;
  height: 139px;
  border-bottom: 1px solid #808695;
}
.five {
  width: 839px;
  height: 252px;
  border-bottom: 1px solid #808695;
}
.six {
  width: 839px;
  height: 126px;
  border-bottom: 1px solid #808695;
}
.seven {
  width: 840px;
  height: 71px;
}
.one /deep/ .el-input__inner {
  border: none;
  width: 120px;
  border-bottom: 1px solid #dcdfe6;
}
.tiwen {
  border: 0px;
  border-bottom: 1px solid rgb(220, 222, 226);
  outline: none;
}
.che /deep/ .el-checkbox {
  margin-bottom: 10px;
}
.zhuan /deep/ .el-input__inner {
  border: none;
  width: 220px;
  height: 30px;
  border-bottom: 1px solid #dcdfe6;
}
.sp .el-radio {
  display: block;
  margin-bottom: 15px;
}
</style>

